<template>
	<div class="BindGroup" v-if="showBindGroup">
		<el-dialog title="绑定技能分组" width="50%" :visible.sync="showBindGroup" :before-close="closeBindGroup">
			<el-divider></el-divider>
			<span class="">
				<el-button @click="save" v-show="!tableData.isEdit" class="editbutton">保存</el-button>
				<el-button @click="edit" v-show="tableData.isEdit" class="editbutton">编辑</el-button>
			</span>
			<!-- 绑定技能分组 -->
			<div class="group">
				<EditTable :tableData="tableData" @changeSkillName="changeSkillName" @addGroup="addGroup" @removeGroup="removeGroup"></EditTable>
			</div>
			<br />
		</el-dialog>
	</div>
</template>

<script>
import EditTable from './EditTable.vue';
export default {
	components: {
		EditTable
	},

	data() {
		return {
			showBindingGruop: false,
			submitStatus: true
		};
	},
	props: {
		showBindGroup: {
			type: Boolean,
			default: () => false
		},
		tableData: {
			type: Object,
			required: true,
			default: () => {}
		}
	},

	methods: {
		closeBindGroup() {
			this.$emit('closeBindGroup');
		},
		save() {
			this.$emit('save');
		},
		addGroup(scope) {
			this.$emit('addGroup', scope);
		},
		edit() {
			this.$emit('edit');
		},

		// 移除数据改变提交按钮状态
		removeGroup(scope) {
			this.$emit('removeGroup', scope);
		},
		changeSkillName(data) {
			this.submitStatus = data;
		}
	}
};
</script>

<style scoped lang="less">
.el-button {
	width: 64px;
	height: 32px;
	background: #ffffff;
	border: 1px solid #6384fe;
	border-radius: 16px;
	font-size: 14px;
	font-family: PingFang SC;
	font-weight: 400;
	color: #6384fe;
	line-height: 8px;
	padding: 0 10px;
}
.group {
	margin-top: 20px;
	background: #f8f8f9;
	border-radius: 4px 4px 0px 0px;
}
.el-divider {
	width: 100%;
	margin-top: -20px;
}
</style>
